<!-- 系统日志 -->
<template>
    <div class="journal">
        <el-card class="!border-none" shadow="never">
            <el-form class="ls-form mb-[-16px]" :model="formData" inline>
                <el-form-item label="药剂类型:">
                    <el-select class="w-[150px]" v-model="formData.type">
                        <el-option
                            v-for="item in typesRef"
                            :key="'type'+item.id"
                            :label="item.name"
                            :value="item.name"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属单位:">
                    <el-select class="w-[100px]" v-model="formData.company">
                        <el-option
                            v-for="item in companyRef"
                            :key="'type'+item.id"
                            :label="item.name"
                            :value="item.name"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="时间范围:">
                    <el-button :type="formData.date=='day'?'primary':''" @click="changeDate('day')">日</el-button>
                    <el-button :type="formData.date=='month'?'primary':''" @click="changeDate('month')">月</el-button>
                    <el-button :type="formData.date=='year'?'primary':''" @click="changeDate('year')">年</el-button>
                </el-form-item>
                <el-form-item label="">
                    <el-date-picker
                        v-model="times"
                        :type="defaultDatePickerType"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :value-format="deformat"
                        :format="deformat"
                        clearable @change="changeTimes"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        
        <el-card class="!border-none mt-4" shadow="never">
            <el-row>
                <el-col :span="4">
                  <div>关键数据：{{formData.type==''?'全部':formData.type}}</div>
                </el-col>
                <el-col :span="4">
                  <div>累计用量：{{pager.countnumber}}</div>
                </el-col>
                <el-col :span="4">
                  <div>平均用量：{{pager.svgnumber}}</div>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="!border-none mt-4" shadow="never" v-loading="pager.loading">
          <el-row>
            <el-col :span="12">
              <v-charts
                  style="height: 300px;"
                  :option="workbenchData.line"
                  :autoresize="true"
              />
            </el-col>
            <el-col :span="12">
              <v-charts
                  style="height: 300px;"
                  :option="workbenchData.bar"
                  :autoresize="true"
              />
            </el-col>
          </el-row>
            <div>
                <el-table :data="pager.lists" size="large" style="width: 100%" height="500">
                    <el-table-column fixed label="时间" prop="date" min-width="110"/>
                    <el-table-column fixed label="材料名称" prop="name" min-width="120" >
                        <template #default="scope">
                            {{scope.row.name?scope.row.name:scope.row.pname}}
                        </template>
                    </el-table-column>
                    <el-table-column fixed label="所属单位" prop="company" min-width="120" />
                    <el-table-column label="库存" prop="kc" min-width="120" />
                    <el-table-column label="当日用量" prop="dryl" min-width="120" />
                    <el-table-column label="库存可用天数" prop="kckyts" min-width="120" />
                    <el-table-column label="备注" style="font-size: 10px;" prop="bz" min-width="120" />
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="journal">
import vCharts from 'vue-echarts'
import { getStockAnalysis } from '@/api/report'
import { usePaging } from '@/hooks/usePaging'
import { GetDateStr } from '@/utils/util'
import {types, company} from './types'

const typesRef = ref(types)
const companyRef = ref(company)

const workbenchData = ref({
  line: {
      title: {
        left: 'center',
        text: '库存量趋势折线图'
      },
      xAxis: {
          type: 'category',
          data: [0]
      },
      yAxis: {
          type: 'value'
      },
      tooltip: {
          trigger: 'axis'
      },
      series: [
          {
              name: '库存量',
              data: [0],
              type: 'line',
              smooth: true
          }
      ]
  },
  bar: {
      title: {
        left: 'center',
        text: '每日用量统计柱状图'
      },
      xAxis: {
          type: 'category',
          data: [0]
      },
      yAxis: {
          type: 'value'
      },
      tooltip: {
          trigger: 'axis'
      },
      series: [
          {
              name: '使用量',
              data: [0],
              type: 'bar',
              smooth: true
          }
      ]
  }
})

// 默认查询昨天的
const yestoday = GetDateStr(-1);

interface formDataObj {
    type?: string // 类型
    company?: string // 分厂
    date?: string // 时间类型
    start?: string // 时间
    end?: string // 时间
}


// 查询表单
const formData = ref<formDataObj>({
    type: '硫酸',
    company: '净化分厂',
    date: 'day',
    start: yestoday,
    end: yestoday,
})

// 时间插件确认
const times = ref([yestoday,yestoday])
function changeTimes(val:any){
  if(formData.value.date=='day'){
    formData.value.start = val[0]
    formData.value.end = val[1]
  }else{
    formData.value.start = val
    formData.value.end = ''
  }
}

// 时间类型切换
const defaultDatePickerType = ref('daterange')
const deformat = ref('YYYY-MM-DD')
function changeDate(val:any){
  formData.value.date = val
  if(val=='day'){
    deformat.value = 'YYYY-MM-DD'
    defaultDatePickerType.value = 'daterange'
    times.value = []
    formData.value.end = ''
  }else if(val=='month'){
    deformat.value = 'YYYY-MM'
    defaultDatePickerType.value = 'month'
    times.value = []
    formData.value.end = ''
  }else if(val=='year'){
    deformat.value = 'YYYY'
    defaultDatePickerType.value = 'year'
    times.value = []
    formData.value.end = ''
  }
}

const { pager, getLists, resetPage } = usePaging({
    fetchFun: getStockAnalysis,
    params: formData.value
})

watch(pager, async (n) => {
  // 清空echarts 数据
  workbenchData.value.line.xAxis.data = []
  workbenchData.value.line.series[0].data = []
  workbenchData.value.bar.xAxis.data = []
  workbenchData.value.bar.series[0].data = []
  n.lists.forEach((item)=>{
    workbenchData.value.line.xAxis.data.push(item.date)
    workbenchData.value.bar.xAxis.data.push(item.date)
    if(item.kc==''){
      item.kc = 0
    }
    workbenchData.value.line.series[0].data.push(item.kc)
    if(item.dryl==''){
      item.dryl = 0
    }
    workbenchData.value.bar.series[0].data.push(item.dryl)
  })
},{ deep: true })

onMounted(() => {
    getLists()
})


</script>

<style lang="scss" scoped></style>
